<template>
	<view class="inforamtion" style="display: flex;">
		<view >
			<view class="option" style="width: 520rpx;">
				<view class="lf">合同款项</view>
				<view class="rl">{{ filterMultiDictText(dictOptions['contractPayment'], item.contractPayment + '') }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">付款比例（%）</view>
				<view class="rl">{{ item.ratioPayment }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">付款金额（元）</view>
				<view class="rl"> {{ item.paymentAmount }}</view>
			</view>
			<view class="option" style="width: 520rpx;">
				<view class="lf">备注</view>
				<view class="rl"> {{ item.remark }}</view>
			</view>
		</view>
		<view  style="flex: 1; display: flex; align-items: center; justify-content: flex-end;" v-if="!disabled">
			<u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="handleEditForm(item)"></u-icon>
			<u-line  direction="col" length="20" margin="0 10rpx"></u-line>
			<u-icon name="trash-fill" color="#2979ff" size="20" @click="handleRemoveForm(item)"></u-icon>
		</view>
	</view>
</template>

<script>
import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
export default {
  name: 'PaymentFormInfo',
  props: {
    index: {
      type: Number,
      default: null,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
		disabled: {
		  type: Boolean,
		  default: false,
		},
  },
  data() {
    return {
      filterMultiDictText,
      initDictOptions,
      dictOptions: {},
    }
  },
  watch: {
  	item:{
  		handler (val) {
  			if (val) {
  				this.initDictConfig()
  			}
  		},
  		immediate: true,
  		deep: true
  	}
  },
  methods: {
    initDictConfig() {
    	initDictOptions('contract_payment').then((res) => {
    		if (res.success) {
    			this.$set(this.dictOptions, 'contractPayment', res.result)
    		}
    	})
    },
    handleEditForm(item) {
      this.$emit('edit', [item, this.index])
    },
    handleRemoveForm(item) {
    	uni.showModal({
    	  content: '确定删除吗？',
    	  success: (res) => {
    	    if (res.confirm) {
    	      this.$emit('remove', item)
    	    }
    	  },
    	})
    },
  },
}
</script>

<style scoped></style>
